/*
 * @Author: wangtao
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-02 10:10:14
 * @Description:
 */

import React from 'react';
import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
import { iconCircleLoadingGray } from '@/images';
import {
  fontColorBlack,
  fontColorDeepGray,
  px2dp,
  screenWidth,
} from '@/styles';

export default class DriverScheduling extends React.Component {
  constructor(props) {
    super(props);
    this.spinValue = new Animated.Value(0);
    this.state = {};
  }

  componentDidMount() {
    this.spin();
  }

  render() {
    // 映射 0-1的值 映射 成 0 - 360 度
    const spin = this.spinValue.interpolate({
      inputRange: [0, 1], // 输入值
      outputRange: ['0deg', '360deg'], // 输出值
    });
    const { queuePosition } = this.props;
    return (
      <View style={styles.container}>
        <Animated.Image
          style={[styles.img, { transform: [{ rotate: spin }] }]}
          resizeMode='stretch'
          source={iconCircleLoadingGray}
        />
        <Text style={styles.desc}>
          {queuePosition > 0
            ? `您前面还有${queuePosition}辆同路线车辆等待配货`
            : '正在为您配货，请您耐心等待'}
        </Text>
      </View>
    );
  }

  // 旋转方法
  spin = () => {
    this.spinValue.setValue(0);
    Animated.timing(this.spinValue, {
      toValue: 1, // 最终值 为1，这里表示最大旋转 360度
      duration: 4000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(() => this.spin());
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: px2dp(40),
  },
  rest: {
    width: px2dp(36),
    height: px2dp(36),
  },
  img: {
    width: px2dp(152),
    height: px2dp(152),
  },
  title: {
    fontSize: px2dp(34),
    color: fontColorBlack,
    fontWeight: 'bold',
    marginTop: px2dp(48),
    marginBottom: px2dp(16),
  },
  desc: {
    fontSize: px2dp(28),
    lineHeight: px2dp(36),
    color: fontColorDeepGray,
    textAlign: 'center',
    marginTop: px2dp(92),
    marginBottom: px2dp(56),
  },
});
